// 变量
$border-blue:rgb(0, 203, 255);
$font-blue:rgb(0, 205, 255);
$lineblue:rgb(19, 107, 179);
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    padding: .4375rem .875rem 0.5rem;
    width: 100%;
    background-color: rgb(16, 26, 52);
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        >div {
            display: flex;
            align-items: center;
            justify-content: center;
            p {
                color: rgba(79, 189, 251, 1);
                font-size: .3rem;
            }
            span {
                color: #fff;
                font-size: .3rem;
            }
        }
        h2 {
            margin-right: 3rem;
            color: #fff;
            opacity: 0.8;
            letter-spacing: 0.1rem;
            font-size: .5rem;
        }
        >p {
            font-size: .3rem;
            color: #fff;
        }
    }
    main {
        margin-top: .5rem;
        .top {
            position: relative;
            .first-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    width: .75rem;
                    height: .05rem;
                    background-color: rgb(255, 212, 97);
                }
            }
            .second-line {
                margin-bottom: .025rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    width: 2.25rem;
                    height: .05rem;
                    background-color: rgb(79, 189, 251);
                }
            }
            .third-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    width: 5.375rem;
                    height: .05rem;
                    background-color: rgb(19, 107, 179);
                }
            }
            .forth-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span:nth-child(1) {
                    box-sizing: content-box;
                    width: .2rem;
                    height: .03rem;
                    margin: 0.0125rem;
                    margin-left: 5.35rem;
                    padding-bottom: .025rem;
                    border-bottom: .025rem solid rgb(19, 107, 179);
                    background-clip: content-box;
                    background-color: rgb(19, 107, 179);
                    transform: rotate(45deg);
                }
                span:nth-child(2) {
                    box-sizing: content-box;
                    width: .2rem;
                    height: .03rem;
                    margin: .0125rem;
                    margin-right: 5.35rem;
                    padding-bottom: .025rem;
                    border-bottom: .025rem solid $lineblue;
                    background-clip: content-box;
                    background-color: rgb(19, 107, 179);
                    transform: rotate(-45deg);
                }
            }
            .fifth-line {
                margin: 0 5.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                top: -0.3rem;
                h5 {
                    color: #fff;
                    font-size: 0.3rem;
                    white-space: nowrap;
                }
                >div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    i {
                        font-size: 0.75rem;
                        color: rgb( 1, 239, 151);
                    }
                    i:nth-child(2) {
                        transform: translate(-0.2rem, 0rem) scale(0.4);
                    }
                    i:nth-child(1) {
                        transform: translate(0.2rem, 0rem) scale(0.4);
                    }
                    >div {
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        justify-content: center;
                        >span {
                            width: 3.375rem;
                            height: .05rem;
                            background-color: $lineblue;
                        }
                        >div {
                            width: 100%;
                            margin-top: .05rem;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            span {
                                width: .75rem;
                                height: .05rem;
                                background-color: $lineblue;
                            }
                            p {
                                width: 0.375rem;
                                height: 0.05rem;
                                background-color: $lineblue;
                            }
                        }
                    }
                }
            }
        }
    }
    section {
        margin-top: 0.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        .first-section {
            display: flex;
            height: 6.75rem;
            align-items: center;
            justify-content: center;
            div {
                height: 100%;
            }
            #first-echart {
                width: 7rem;
                border: 2px solid $border-blue;
                box-shadow: 0rem 0rem 0.4rem 0.2rem rgba($color: $border-blue, $alpha: 0.3) inset;
            }
            #second-echart {
                width: 8rem;
            }
            #third-echart {
                width: 7rem;
                border: 2px solid $border-blue;
                box-shadow: 0rem 0rem 0.4rem 0.2rem rgba($color: $border-blue, $alpha: 0.3) inset;
            }
        }
        .second-section {
            margin-top: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            div {
                width: 22rem;
                border: 2px solid $border-blue;
                box-shadow: 0rem 0rem 0.4rem 0.2rem rgba($color: $border-blue, $alpha: 0.3) inset;
            }
            #fifth-echart {
                margin-right: 0.25rem;
                margin-left: 0.25rem;
                table {
                    width: 100%;
                    height: 100%;
                    thead {
                        tr {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            background-color: rgba($color: #007947, $alpha: 0.4);
                            th {
                                width: 1rem;
                                text-align: center;
                                font-size: 0.25rem;
                                color: #fff;
                                padding: 0.1rem 0.2rem;
                            }
                        }
                    }
                    tbody {
                        tr {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            td {
                                padding: 0.1rem 0.2rem;
                                width: 1rem;
                                font-size: 0.2rem;
                                text-align: center;
                                color: #fff;
                            }
                            td:nth-child(1) {
                                font-size: 0.25rem;
                                background-color: rgba($color: #65c294, $alpha: 0.6);
                            }
                        }
                        tr:nth-child(2n) {
                            background-color: rgba($color: #33a3dc, $alpha: 0.5);
                        }
                    }
                }
            }
        }
    }
}